import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
        child: Text("滑动 组件"),
      )),
      body: MyHomeContent(),
      floatingActionButton: FloatingActionButton(
        onPressed: () => print("FloatingActionButton"),
        child: Icon(Icons.star),
      ),
    );
  }
}

class Mem extends StatelessWidget {
  final String content;

  Mem(this.content);

  @override
  Widget build(BuildContext context) {
    return Title(
        color: Colors.black,
        child: Text(content, style: TextStyle(fontSize: 16)));
  }
}

class MyHomeContent extends StatefulWidget {
  @override
  State<MyHomeContent> createState() => _MyHomeContentState();
}

class _MyHomeContentState extends State<MyHomeContent> {
  @override
  Widget build(BuildContext context) {
    var divider = Column(
      children: [
        const Divider(height: 1, color: Colors.black),
        SizedBox.fromSize(size: Size.fromHeight(10))
      ],
    );

    return ListView(
      children: [
        Mem("ListView 默认是垂直滚动"),
        Container(
          height: 200,
          color: Colors.yellow,
          child: ListView(
            children: List.generate(
                20,
                (index) => ListTile(
                      leading: Icon(Icons.leaderboard),
                      trailing: Icon(Icons.delete),
                      title: Text("Title $index"),
                      subtitle: Text("subTitle $index"),
                    )),
          ),
        ),
        divider,
        Mem("设置 scrollDirection 水平滚动，要确认每个元素的宽度。一般不会使用 ListView 做水平滚动"),
        Container(
          height: 30,
          color: Colors.deepOrangeAccent,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: List.generate(20, (index) => Text("Text $index  ")),
          ),
        ),
        divider,
        Mem("ListView.builder 实际开发中使用更多，是懒执行的，性能会高一些"),
        Container(
            height: 200,
            color: Colors.lightBlueAccent,
            child: ListView.builder(
                itemCount: 20,
                itemExtent: 40, //高度
                itemBuilder: (context, index) => ListTile(
                    leading: Icon(Icons.leaderboard),
                    trailing: Icon(Icons.delete),
                    title: Text("Title $index"),
                    subtitle: Text("subTitle $index")))),
        divider,
        Mem("ListView.separated 自定义分割线 和 builder 基本一样"),
        Container(
            height: 200,
            color: Colors.greenAccent,
            child: ListView.separated(
              itemCount: 20,
              itemBuilder: (context, index) => ListTile(
                  leading: Icon(Icons.leaderboard),
                  trailing: Icon(Icons.delete),
                  title: Text("Title $index"),
                  subtitle: Text("subTitle $index")),
              separatorBuilder: (context, index) => Divider(
                thickness: 2,
                color: Colors.red,
              ),
            )),
        Divider(thickness: 5, color: Colors.black),
        Mem("GridView 网格视图 每行 3 个格子、宽高比 1.5、主轴间隔 8、副轴间隔 5"),
        Container(
            height: 200,
            padding: EdgeInsets.symmetric(horizontal: 2),
            child: GridView(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3, // 每行 3 个格子
                    // 间距
                    mainAxisSpacing: 8,
                    crossAxisSpacing: 5,
                    childAspectRatio: 1.5 // 宽高比
                    ),
                children: List.generate(
                    20,
                    (index) => Container(
                        color: Color.fromARGB(255, Random().nextInt(256),
                            Random().nextInt(256), Random().nextInt(256)))))),
        divider,
        Mem("GridView.builder"),
        Container(
            height: 200,
            padding: EdgeInsets.symmetric(horizontal: 2),
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 5,
                    // 间距
                    mainAxisSpacing: 8,
                    crossAxisSpacing: 5,
                    childAspectRatio: .5 // 宽高比
                    ),
                itemCount: 32,
                itemBuilder: (context, index) => Container(
                    color: Color.fromARGB(255, Random().nextInt(256),
                        Random().nextInt(256), Random().nextInt(256))))),
        divider,
      ],
    );
  }
}
